<template>
  <!-- 5身份抗识别 -->
  <div class="tc">
    <div class="bg">
      <div class="title">
        用户信息
      </div>
      <div class="body">
        <div class="unit-info">
          <span>用户：</span>
          <span class="right-align">王芳</span>
        </div>
        <div class="unit-info">
          <span>用户单位：</span>
          <span class="right-align">郑州大学</span>
        </div>
        <div class="unit-info">
          <span style="color: #ffb302;">①微博信息：</span>
        </div>

        <div class="unit-info">
          <span>用户昵称：</span>
          <span class="right-align">芳华</span>
        </div>
        <div class="unit-info">
          <span style="color: #2aed07;">②知乎信息</span>
        </div>
        <div class="unit-info">
          <span>用户昵称：</span>
          <span class="right-align">孤芳自赏</span>
        </div>
        <div class="unit-info">
          <span>风险信息</span>
          <span class="right-align redtext">存在身份对齐风险</span>
        </div>
        <div style="padding: 10px;">
          <el-button class="bt1" @click="dialogVisible = true">
            抗身份识别
          </el-button>
          <el-button class="bt1">
            详情
          </el-button>
        </div>
      </div>
    </div>
    <!-- 弹窗-->
    <el-dialog class="maindialog" title="干扰任务配置" :visible.sync="dialogVisible" width="20%" :before-close="handleClose"
      z-index="1000">
      <el-descriptions title="用户信息" :column="2">
        <el-descriptions-item label="用户名称">
          admin
        </el-descriptions-item>
        <el-descriptions-item label="ID">
          1234456123
        </el-descriptions-item>
        <el-descriptions-item label="昵称">
          王芳
        </el-descriptions-item>
        <el-descriptions-item label="平台">
          知乎
        </el-descriptions-item>
      </el-descriptions>

      <div>
        <h3>抗识别方式</h3>
        <el-radio v-model="radio" label="1">
          虚拟社交关系构建
        </el-radio>
        <el-radio v-model="radio" label="2">
          虚拟用户布设
        </el-radio>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="showDetails">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog class="maindialog" :visible.sync="dialogDetails" width="30%" z-index="1000">
      <template #title>
        <div style="font-weight:bold;font-size:20px;color: #fff;text-align: center;">
          新建用户抗身份识别任务
        </div>
      </template>
      <span class="dialogDetailstext">新建用户抗身份识别任务完成，任务执行需要一段时间，完成后将在消息框进行提示。</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogDetails = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: "1",
      dialogVisible: false,
      dialogDetails: false,
    };
  },
  methods: {
    showDetails() {
      this.dialogVisible = false
      this.dialogDetails = true
    },
    handleClose() { }
  },
};
</script>

<style lang="scss" scoped>
.bt1 {
  font-size: 13px;
  width: 100px;
  background: linear-gradient(270deg, #2DB2FD 0%, #0E5FFF 100%);
  border-radius: 2px 2px 2px 2px;
  border: none;
  color: #fff;
  text-align: center;
  position: relative;
  top: 20px;
  left: 20px;
}

.tc {
  position: absolute;
  top: 100px;
  right: 50px;
  width: 340px;
  height: 350px;
  z-index: 10000;
}

.bg {
  padding: 20px;
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/xd/dialogbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 10000;
}

.title {
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: 19px;
  text-align: left;
  font-style: normal;
  text-align: center;
  // padding: 20px;
  font-weight: bold;
}

.el-descriptions-item {
  font-size: 18px;
}

.dialogDetailstext {
  font-size: 18px;
  font-weight: bolder;
  color: #fff;
}

.unit-info {
  display: flex;

  position: relative;
  top: 25px;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  color: #90CEE9;
  font-size: 18px;

}

.right-align {
  margin-left: auto;
  color: #fff;
}

.redtext {
  color: red;
  font-weight: bold;
}
</style>